<template>
    <div class="offline" :class="{'withbar':withbar}" v-if="status">
        <i class="offline-icon"></i>
        网络异常，请检查网络是否已连接
    </div>
</template>
<script>
export default {
    name:'offline',
    props:{
        withbar:Boolean
    },
    data(){
        return {
            status:false
        }
    },
    mounted(){
        window.addEventListener('online',  this.onlineHandle);
        window.addEventListener('offline', this.offlineHandle);

    },
    destroyed(){
        window.removeEventListener('online',  this.onlineHandle);
        window.removeEventListener('offline', this.offlineHandle);
    },
    methods:{
        offlineHandle(){
            this.status = true
        },
        onlineHandle(){
            this.status = false;
        }
    }

}
</script>
<style lang="less">
    .offline {
        position: fixed;
        z-index:99999;
        bottom:0;
        left:0;
        right:0;
        font-size:30px;
        color:#fff;
        height:70px;
        background-color: rgba(256,107,64,.94);

        &.withbar {
            bottom:104px;
        }

        &,.offline-icon {
            display: flex;
            justify-content: center;
            align-items: center;
        }

        .offline-icon {
            margin-right:20px;
            flex-direction: column;
            width:32px;
            height:32px;
            border-radius:50%;
            border:2px solid #fff;

            &::before,&::after {
                content: '';
                width:2px;
                height: 2px;
                background-color:#fff;
            }

            &::before {
                margin-bottom:2px;
                height:14px;
            }
        }
    }
</style>


